import { observer } from "mobx-react";
import classnames from 'classnames';
import { Icon, Modal, Button } from 'antd';
import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider, WeaCheckbox } from 'ecCom';
const { getLabel } = WeaLocaleProvider;
@observer
export default class DropMenu extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div onMouseEnter={this.enterDropMenu} onMouseLeave={this.leaveDropMenu}>
                <div className="edc-drop-menu-popu" style={{ left: store.dropMenuLeft, top: store.dropMenuTop }} >
                    <ul className={classnames('menu', { 'menu-hidden': !store.dropMenuVisible })}>
                        {store.excelPages.map(d => (
                            <li
                                title={d.name}
                                onClick={store.showPage.bind(store, d.id)}
                                className={classnames('menu-item', 'text-elli', { active: d.id === store.selectedKey })}
                                key={d.id}>
                                <div className="text-elli" style={{ width: 120 }}>{d.name}</div>
                                {!store.readonly && <div><div className='defaultshow' title={'是否默认展示'} onClick={this.isShow.bind(this)}><WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@fleup8@${d.id}`} value={d.defaultshow} onChange={this.setDefaultShow.bind(this, d.id)} display="switch" /> </div>
                                    <div className="menu-item-opts">
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@cpgdp8@${d.id}`} type="edit" onClick={this.editPage.bind(this, d.id, d.name)} title={getLabel(504304, "修改")}></Icon>
                                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@3lymr8@${d.id}`} type="delete" onClick={this.deletePage.bind(this, d.id)} title={getLabel(502286, '删除')}></Icon>
                                    </div></div>}
                            </li>
                        ))}
                    </ul>
                </div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@wrll8e`}
                    icon={"icon-coms02-Data-center"}
                    iconBgcolor="#1a57a0"
                    title={`${getLabel('511841','修改表格：')}${store.operatePage.name}`}
                    draggable={true}
                    visible={store.editPageVisible}
                    style={{ height: 'auto' }}
                    buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@17ril9@`} type="primary" loading={store.editPageLoading} onClick={this.savePage} >{getLabel('502312','保存')}</Button>, <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h31erk@`} type="primary" onClick={store.hideEditPage} >{getLabel('31129','取消')}</Button>]}
                >

                    <div style={{ lineHeight: '32px', padding: 24 }}>
                        <label style={{ marginRight: 10 }}>{getLabel('502347', '名称')}</label>
                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@d84pyj`}
                            tipPosition='bottom'
                            ref={ref => store.nameError = ref}
                            error={getLabel('511842','数据为空')}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@nu4465`}
                                style={{ width: 300, marginLeft: 10 }}
                                value={store.operatePage.newName}
                                viewAttr={3}
                                onChange={store.changeOperatePageName}
                            />
                        </WeaError>
                    </div>
                </WeaDialog>
            </div>
        )
    }
    editPage = (id, name, e) => {
        const { store } = this.props;
        store.showPageEditDialog(id, name);
        e.stopPropagation();
    }
    savePage = ()=>{
        const { store } = this.props;
        store.savePage();
    }
    deletePage = (id, e) => {
        Modal.confirm({
            title: getLabel('511843','删除表格'),
            content: getLabel('511844','确认删除表格'),
            onOk: () => {
                const { store } = this.props;
                store.deletePage(id);
            }
        });
        e.stopPropagation();
    }
    setDefaultShow = (id, value, e) => {
        const { store } = this.props;
        store.setDefaultShow(id, value);
    }
    isShow = (e) => {
        e.stopPropagation();
    }
    enterDropMenu = () => {
        const { store } = this.props;
        clearTimeout(store.hideDropMenuTimer);
    }
    leaveDropMenu = () => {
        const { store } = this.props;
        store.hideDropMenu();
    }
}